<template>
  <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="设置"></myHead>
    <div class="userInfo">
      <div class="uhead" @click="set('uhead')">
        <img :src="$store.state.userInfo.avatar" alt="">
        <div><span>头像</span><img src="../../../static/img/yjt1.png" alt=""></div>
      </div>
      <div class="box">
        <p>昵称设置</p>
        <div @click="set('nikeName',$store.state.userInfo.nickname)"><span>{{$store.state.userInfo.nickname}}</span><img src="../../../static/img/yjt1.png" alt=""></div>
      </div>
      <div class="box">
        <p>手机号</p>
        <div @click="set('tel',$store.state.userInfo.mobile)"><span>{{$store.state.userInfo.mobile}}</span><img src="../../../static/img/yjt1.png" alt=""></div>
      </div>
      <div class="box">
        <p>性别</p>
        <div @click="sexisShow"><span>{{$store.state.userInfo.gender==1?'男':'女'}}</span><img src="../../../static/img/yjt1.png" alt=""></div>
      </div>
      <div class="box">
        <p>所在学校</p>
        <div @click="set('school',$store.state.userInfo.school?$store.state.userInfo.school:'无')"><span>{{$store.state.userInfo.school?$store.state.userInfo.school:'无'}}</span><img src="../../../static/img/yjt1.png" alt=""></div>
      </div>
    </div>

    <div class="qt">
      <div class="box">
        <p>关于纸条校园</p>
        <div><span></span><img src="../../../static/img/yjt1.png" alt=""></div>
      </div>
      <div class="box">
        <p>平台协议</p>
        <div><span></span><img src="../../../static/img/yjt1.png" alt=""></div>
      </div>
      <div class="box">
        <p>隐私政策</p>
        <div><span></span><img src="../../../static/img/yjt1.png" alt=""></div>
      </div>
    </div>

    <div class="out" @click="outShow = true">退出登录</div>
    <van-action-sheet v-model="sexShow" :actions="actions" @select="onSelect" />
    <van-dialog v-model="show" :show-cancel-button="false" :confirm-button-text="setMsg" width="3rem" @confirm="confirm" :close-on-click-overlay="true" @close="close">
        <div class="setNikeName" v-show="setShow">
          <input type="text" :placeholder="setTxt" v-model='setInfo' v-if="!imgShow">
          <div class="setUserImg" v-if="imgShow">
            <input type="file" @change="file">
            <img :src="photos" alt="">
          </div>
        </div>
    </van-dialog>


  <!--  询问弹窗  -->
    <van-dialog v-model="outShow" title="确定退出吗？" show-cancel-button width="3.2rem" @confirm="signOut"></van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import Vue from 'vue';
  import { Notify } from 'vant';
  import qs from 'qs';
  Vue.use(Notify);
  export default {
    name: "setUp",
    components: {
      myHead
    },
    data(){
      return {
        sexShow:false,
        actions: [
          { name: '男',sex:1 },
          { name: '女',sex:0 },
        ],
        show:false,
        setShow:false,
        setInfo:'',
        setTxt:'请输入新的昵称',
        setMsg:'立即修改',
        imgShow:false,
        setType:'',
        base64:'', // 修改头像的base64位码
        photos:'../../../static/img/jzgrzx.png',
        outShow:false // 退出登录弹窗
      }
    },
    created(){

    },
    mounted() {

    },
    methods:{
      // 通知函数
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.sexShow = false;
        this.$myAxios('index/user/head_add', 'post',{
          user_id:this.$store.state.userInfo.id,
          nickname:'',
          gender:item.sex,
          mobile:'',
          avatar:'',
          school:''
        }).then(res=>{
          if (res.data.state == '1') {
            this.$myNotice('修改成功!',2000);
          } else {
            this.$myNotice('修改失败!',2000);
          }
          this.$store.state.userInfo.gender = item.sex;
        });
      },
      sexisShow(){
        this.sexShow = true;
      },
      set(type,info = ''){
        switch (type) {
            case 'nikeName':
              this.setShow = true;
              this.setInfo = info;
              this.setTxt = '请输入新的昵称';
              this.setType = type;
              this.imgShow = false;
              break;
            case 'tel':
              this.setShow = true;
              this.setInfo = info;
              this.setTxt = '请输入新的手机号';
              this.setType = type;
              this.imgShow = false;
              break;
            case 'school':
              this.setShow = true;
              this.setInfo = info;
              this.setTxt = '请输入学校名字';
              this.setType = type;
              this.imgShow = false;
              break;
            case 'uhead':
              this.setShow = true;
              this.imgShow = true;
              this.setType = type;
              break;
        }
        this.show = true;
      },
      close(){
        this.setShow = false;
      },
      confirm(){
        switch (this.setType) {
          case 'nikeName':
            console.log(this.$store.state.userInfo.id,this.setInfo)
            this.$myAxios('index/user/head_add', 'post',{
              user_id:this.$store.state.userInfo.id,
              nickname:this.setInfo,
              gender:'',
              mobile:'',
              avatar:'',
              school:''
            }).then(res=>{
              if (res.data.state == '1') {
                this.$store.state.userInfo.nickname = this.setInfo;
                this.$myNotice('修改成功!',2000);
              } else {
                this.$myNotice('修改失败!',2000);
              }
            });
            console.log('修改昵称');
            break;
          case 'tel':
            console.log('修改手机号');
            break;
          case 'school':
            this.$myAxios('index/user/head_add', 'post',{
              user_id:this.$store.state.userInfo.id,
              nickname:'',
              gender:'',
              mobile:'',
              avatar:'',
              school:this.setInfo
            }).then(res=>{
              if (res.data.state == '1') {
                this.$store.state.userInfo.school = this.setInfo;
                this.$myNotice('修改成功!',2000);
              } else {
                this.$myNotice('修改失败!',2000);
              }
            });
            console.log('修改学校');
            break;
          case 'uhead':
            // return
            // console.log(this.userInfo.id)
            console.log(this.photos,'头像');
            this.$myAxios('index/user/head_add', 'post', {
              user_id:this.$store.state.userInfo.id,
              avatar:this.base64,
              gender:'',
              mobile:'',
              nickname:'',
              school:''
            }).then(res=>{
              if (res.data.state == '1') {
                this.$store.state.userInfo.avatar = this.photos;
                this.$myNotice('修改成功!',1500);
              } else {
                this.$myNotice('修改失败!',1500);
              }
            });
            console.log('修改用户头像');
            break;
        }
        // this.setInfo = '';
      },
      file(files){
        var src = files.target.files[0];
        var lq = new FileReader();
        lq.readAsDataURL(src);
        lq.onload = res=>{
          var index = res.target.result.indexOf('base64,')+7;
          var result = res.target.result;
          this.photos = res.target.result;
          this.base64 = result.substring(index);
        };
        var file = new FormData();
        // console.log(src,'src')
        file.append('file',src);
        // console.log(src)
        // this.$axios.post('http://take.zhitiaoxiaoyuan.com/index/Recruitment/uploading',file,{
        //   headers:{
        //     "Content-Type":"multipart/form-data"
        //   }
        // }).then(res=>{
        //   console.log(res,'251行')
        // });
        if (src.size/1024>1) {
          console.log('图片不能超过1MB')
        }
        // $.ajax({
        //   type: "POST",
        //   url: "http://www.scrip.com/public/index/Recruitment/uploading",
        //   data: file , //这里上传的数据使用了formData 对象
        //   processData: false,
        //   contentType: false, //必须false才会自动加上正确的Content-Type
        //   //这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
        //   xhr: function() {
        //     var xhr = $.ajaxSettings.xhr();
        //     if (xhr.upload) {
        //       xhr.upload.onprogress = function(progress) {
        //         console.log(progress)
        //         if (progress.lengthComputable) {
        //           console.log(progress.loaded / progress.total * 100);
        //           // progressBar.max = progress.total;
        //           // progressBar.value = progress.loaded;
        //         }
        //       };
        //       xhr.upload.onloadstart = function() {
        //         console.log('started...');
        //       };
        //     }
        //     return xhr;
        //   }
        // }).done(function(resp) {
        //   alert('完成！');
        // }).fail(function(err) {
        //   alert('无法连接服务器！')
        // })
      },
      signOut(){
        // 退出登录
        this.$myStorage.signOut();
        this.$store.commit('signOutLogin');
        this.$router.back();
      }
    }
  }
</script>

<style scoped>
  .wrap {
    padding-top: .5rem;
    box-sizing: border-box;
    background-color: #F5F5F5;
  }

  .userInfo,.qt {
    width: 3.51rem;
    background: rgba(255, 255, 255, 1);
    border-radius: .06rem;
    margin: .1rem auto;
  }

  .uhead {
    border-bottom: .01rem solid #F5F5F5;
    display: flex;
    flex-flow: row;
    align-items: center;
    box-sizing: border-box;
    padding: .08rem .1rem;
    justify-content: space-between;
  }
  .uhead> div,.box>div {
    width: 60%;
    text-align: right;
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    align-items: center;
  }
  .uhead > img {
    width: .5rem;
    height: .5rem;
    border-radius: 100%;
  }
  .uhead > div > span,.box>div>span {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
  }
  .uhead > div > img,.box>div>img {
    width: .07rem;
    height: .13rem;
    margin-left: .15rem;
  }
  .box {
    width: 100%;
    height: .5rem;
    border-bottom: .01rem solid #F5F5F5;
    display: flex;
    flex-flow: row;
    align-items: center;
    box-sizing: border-box;
    padding: .08rem .1rem;
    justify-content: space-between;
  }
  .box>p {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
  .out {
    width:3.29rem;
    height:.44rem;
    margin: .3rem auto;
    background:linear-gradient(0deg,rgba(255,142,65,1),rgba(255,110,0,1));
    box-shadow:0 .04rem .11rem 0 rgba(255,112,5,0.4);
    border-radius:.22rem;
    text-align: center;
    font-size:.18rem;
    font-family:SourceHanSansCN;
    font-weight:500;
    color: #ffffff;
    line-height: .44rem;
  }
/* 选择男女 */
  >>> .van-popup--bottom.van-popup--round {
    border-radius:.2rem .2rem 0 0;
  }
  >>> .van-action-sheet__cancel, .van-action-sheet__item {
    font-size: .16rem;
    line-height: .5rem;
  }
  >>> .van-action-sheet__item {
    height: .5rem;
  }
  /* 弹窗适配 */
  >>> .van-button--large {
    height: .5rem;
    line-height: .48rem;
  }
  >>> .van-button {
    font-size: .16rem;
    border-radius: .02rem;
  }
  >>> .van-dialog {
    border-radius: .16rem;
  }
  >>> .van-dialog__footer::after {
    border: .01rem solid #EEEEEE;
  }

/* 昵称修改 */
  .setNikeName {
    width: 100%;
    height: .8rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .setNikeName>input {
    width: 80%;
    height: .2rem;
    font-size: .14rem;
    line-height: .2rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    outline: none;
    border: none;
  }

  .setUserImg {
    position: relative;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    overflow: hidden;
  }
  .setUserImg>input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    opacity: 0;
  }
  .setUserImg>img {
    width: 100%;
    height: 100%;
  }
</style>
